<template>
     <div class="van_top">
          <van-nav-bar @click="$router.push('/home/account')" title="修改手机号" left-arrow />
     </div>
     <div class="item">
          <div class="item1">
               <span>新手机号</span>
          </div>
          <div class="item2">
               <input type="text" placeholder="请输入手机号">
          </div>
     </div>
     <div class="item">
          <div class="inp">
               <input type="text" placeholder="输入验证码">
          </div>
          <div class="yzm">
               <span>获取验证码</span>
          </div>
     </div>
     <div class="btn">
          <van-button color="#ba6608">保存</van-button>
     </div>
</template>
    
<script setup lang="ts">

</script>
    
<style scoped>
.btn {
     margin-top: 100px;
     width: 100%;
     height: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
}

.btn>button {
     width: 90%;
}

.item {
     width: 100%;
     font-size: 16px;
     margin-top: 40px;
     padding: 20px 0px 20px 20px;
     border-bottom: 1px solid gray;
}


.van_top {
     --van-nav-bar-title-text-color: #000;
     /* 设置标题文本颜色为黑色 */
}

/* /deep/的意思大概为深入的 */

.van_top /deep/ .van-nav-bar__text {
     color: #000000;
}

.van-nav-bar__title {
     color: black;
}

.van_top /deep/ .van-icon-arrow-left {
     color: var(--nav-bar-icon-color, #000000) !important;
}


.van_top /deep/ .van-nav-bar {
     background-color: white;
}

.item1 {
     width: 35%;
     display: inline-block;
}

.item2 {
     width: 65%;
     display: inline-block;
}

.item2>input {
     border: 0;
}

.inp {
     width: 70%;
     display: inline-block;
}

.inp>input {
     border: 0;
}

.yzm {
     width: 30%;
     display: inline-block;
     color: #c47813;
}
</style>